<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/移动端布局案例.css">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <link rel="stylesheet" href="./font/iconfont.css">
    <!-- <style>
        header{
            height: 45px;
            background-color: red;
        }
    </style> -->
</head>

<body>
    <header>拉勾网</header>
    <section>
        <!-- nav设置为弹性盒子 -->
        <nav>
            <span class="sp1">10秒钟定制职位</span>
            <span class="sp2">去登陆</span>
        </nav>
        <!-- info设置为弹性盒子 -->
        <div class="info">
            <div class="left">
                <img src="./img/mi-logo.png" alt="">
            </div>
            <div class="center">
                <p class="p1">小米集团</p>
                <p class="p2">小米集团小米集团</p>
                <p class="p3">今天15：16</p>
            </div>
            <div class="right">20k-25k</div>
        </div>

        <div class="info">
            <div class="left">
                <img src="./img/mi-logo.png" alt="">
            </div>
            <div class="center">
                <p class="p1">小米集团</p>
                <p class="p2">小米集团小米集团</p>
                <p class="p3">今天15：16</p>
            </div>
            <div class="right">20k-25k</div>
        </div>

        <div class="info">
            <div class="left">
                <img src="./img/mi-logo.png" alt="">
            </div>
            <div class="center">
                <p class="p1">小米集团</p>
                <p class="p2">小米集团小米集团</p>
                <p class="p3">今天15：16</p>
            </div>
            <div class="right">20k-25k</div>
        </div>

        <div class="info">
            <div class="left">
                <img src="./img/mi-logo.png" alt="">
            </div>
            <div class="center">
                <p class="p1">小米集团</p>
                <p class="p2">小米集团小米集团</p>
                <p class="p3">今天15：16</p>
            </div>
            <div class="right">20k-25k</div>
        </div>
        <div class="info">
            <div class="left">
                <img src="./img/mi-logo.png" alt="">
            </div>
            <div class="center">
                <p class="p1">小米集团</p>
                <p class="p2">小米集团小米集团</p>
                <p class="p3">今天15：16</p>
            </div>
            <div class="right">20k-25k</div>
        </div>
        <div class="info">
            <div class="left">
                <img src="./img/mi-logo.png" alt="">
            </div>
            <div class="center">
                <p class="p1">小米集团</p>
                <p class="p2">小米集团小米集团</p>
                <p class="p3">今天15：16</p>
            </div>
            <div class="right">20k-25k</div>
        </div>
        <div class="info">
            <div class="left">
                <img src="./img/mi-logo.png" alt="">
            </div>
            <div class="center">
                <p class="p1">小米集团</p>
                <p class="p2">小米集团小米集团</p>
                <p class="p3">今天15：16</p>
            </div>
            <div class="right">20k-25k</div>
        </div>
        <div class="info">
            <div class="left">
                <img src="./img/mi-logo.png" alt="">
            </div>
            <div class="center">
                <p class="p1">小米集团</p>
                <p class="p2">小米集团小米集团</p>
                <p class="p3">今天15：16</p>
            </div>
            <div class="right">20k-25k</div>
        </div>
        <div class="info">
            <div class="left">
                <img src="./img/mi-logo.png" alt="">
            </div>
            <div class="center">
                <p class="p1">小米集团</p>
                <p class="p2">小米集团小米集团</p>
                <p class="p3">今天15：16</p>
            </div>
            <div class="right">20k-25k</div>
        </div>
        <div class="info">
            <div class="left">
                <img src="./img/mi-logo.png" alt="">
            </div>
            <div class="center">
                <p class="p1">小米集团</p>
                <p class="p2">小米集团小米集团</p>
                <p class="p3">今天15：16</p>
            </div>
            <div class="right">20k-25k</div>
        </div>
    </section>

    <!-- footer设置为弹性盒子 -->
    <footer>
        <p class="iconfont icon-shouye">首页</p>
        <p class="iconfont icon-sousuo">搜索</p>
        <p class="iconfont icon-wode">我的</p>
    </footer>
</body>

</html>